<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../第三天/js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 100%;
            height: 100%;
        }
        footer{
            height: 30px;
            width: 100%;
            background-color: #cccccc;
            position: fixed;
            left: 0;
            bottom: 0;
        }
        footer ul{
            list-style: none;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        footer ul li{
            text-align: center;
            width: 33%;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
       <home v-if="isWhitch==0"></home>
	   <detail v-if="isWhitch==1"></detail>
	   <cart v-if="isWhitch==2"></cart>
        <footer>
            <ul>
                <!-- 点击时修改isWhitch状态值，以些决定显示哪个组件作为当前页面显示 -->
                <li @click="isWhitch=0" :class="isWhitch==0? 'active':''">首页</li>
                <li @click="isWhitch=1" :class="isWhitch==1? 'active':''">详情</li>
                <li @click="isWhitch=2" :class="isWhitch==2? 'active':''">购物车</li>
            </ul>
        </footer>
    </div>
        
    <script>
       Vue.component("home",{
           template : `<div>home</div>`
       })
       Vue.component("detail",{
           template : `<div>detail</div>`
       })
       Vue.component("cart",{
           template : `<div>cart</div>`
       })
        var vm = new Vue({
            el : "#box",
            data : {
                isWhitch : 0//定义初始值
            }
        })
    </script>
</body>
</html>